<template>
    <menu-bar :todoList="list">
        <template v-slot:item0>
            <label class="bg-white" for="selectFile">选择文件</label><input id="selectFile" type="file" @change="openFile" ref="fileRef" style="position:absolute; clip:rect(0,0,0,0);">
        </template>
        <template v-slot:item1>
            <select name="kml-files" v-model="kmlSelected" @change="getKmlFileSelected">
                <option value="-1">---请选择---</option>
                <option :value="kml.id" v-for="kml in kmlList" :key="kml.id">{{kml.name}}</option>
            </select>
        </template>
    </menu-bar>
</template>
<script type="module">
import MenuBar from '../MenuBar.vue'
export default{
    components:{MenuBar},
    data(){
        return{ 
            open:'1',
            kmlSelected:-1,
            list: [
                '本地文件',
                'kml',
            ],
            kmlList:[
                {
                    id:0,
                    name:'science facilities',
                    url:'/SampleData/kml/facilities/facilities.kml'
                },
                {
                    id:1,
                    name:'xdqd',
                    url:'/SampleData/kml/doctor.kml'
                }
            ]
        }
    },
    methods:{
      //打开kml文件
      openFile(){
        var instance =this.$refs.fileRef;
        const  file =instance.files[0];
        console.log(file);
                  var kmlPromise =Cesium.KmlDataSource.load(file,     {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas
     });
        global.viewer.dataSources.add(kmlPromise);
      },
      getKmlFileSelected(){
          var kmlPromise =Cesium.KmlDataSource.load(this.kmlList[this.kmlSelected].url,     {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas
     });
        global.viewer.dataSources.add(kmlPromise);
      }
    }
}
</script>
<style scoped>

</style>    